<template>
  <!-- 首页 热门歌星组件 -->
  <div>
    <!-- 标题插槽 -->
    <slot name="title"></slot>

    <!-- 热门歌星 内容 -->
    <div class="music-star">
      <a
        class="music-star-item"
        v-for="(s, index) in stars"
        :key="index"
        target="_blank"
        :href="`https://baike.baidu.com/item/${s.name}`"
      >
        <div class="star-icon">
          <img :src="s.icon" :alt="s.name" />
        </div>
        <div class="star-name">{{ s.name }}</div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "MusicStar",
  data() {
    return {
      /* 歌星数据 */
      stars: [
        {
          icon: "https://i.postimg.cc/X7F5wk6c/e8c501303692a95b1aedd83540a8f06.jpg",
          name: "邓紫棋",
        },
        {
          icon: "https://i.postimg.cc/cJJ65Q2z/689b56143d1e73cfbac5e6a3bfff6b9.jpg",
          name: "林俊杰",
        },
        {
          icon: "https://i.postimg.cc/GhrL5Fsj/c3ad82372950f93e391896dc9a8f110.jpg",
          name: "周杰伦",
        },
        {
          icon: "https://i.postimg.cc/g0wmZ4fG/c44a5d20e4645993d05f6f59aa38276.jpg",
          name: "薛之谦",
        },
        {
          icon: "https://i.postimg.cc/SxPpkCj3/4ea0836288e2434199f91c0b604a92a.jpg",
          name: "许嵩",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.music-star {
  display: flex;
  justify-content: space-between;
  .music-star-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    &:hover {
      color: #ffcff1;
    }
    &:hover .star-icon img {
      transform: scale(1.1);
    }
    .star-icon {
      height: 3rem;
      width: 3rem;
      border-radius: 0.2rem;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
        transition: all 0.5s;
      }
    }
    .star-name {
      margin-top: 0.2rem;
      font-size: 0.2rem;
    }
  }
}
@media screen and (max-width: 900px) {
  .music-star {
    .music-star-item {
      .star-icon {
        width: 1.75rem;
        height: 1.75rem;
      }
    }
  }
}
</style>